<template>
  <div class="detail">
    <div class="header">
      <AppHeader>
        <div class="title">
          {{ detail.name }}
          <span class="status">（{{ detail.enterpriseStatus }}）</span>
        </div>
      </AppHeader>
      <p class="time">
        入驻时间：
        {{
          detail.enterpriseIncubatorVO &&
            detail.enterpriseIncubatorVO.contractStartExpiryDate
        }}
      </p>
      <div class="info">
        <ACL id="operName">
          <div class="item">
            <p>法人</p>
            <p>{{ detail.operName }}</p>
          </div>
        </ACL>
        <ACL id="registCapi">
          <div class="item">
            <p>注册资本</p>
            <p>{{ detail.registCapi }}</p>
          </div>
        </ACL>
        <ACL id="startDate">
          <div class="item">
            <p>注册时间</p>
            <p>{{ detail.startDate }}</p>
          </div>
        </ACL>
      </div>
      <p class="fl-info">房号：{{ getRoomNo(detail) }}</p>
    </div>
    <div class="main">
      <div class="func">
        <a href="" class="fav">收藏</a>
        <a href="" class="tag">便签</a>
      </div>
      <div class="co-info-list">
        <template v-for="item in modules">
          <router-link
            :key="item.key"
            tag="div"
            :to="{
              name: 'CompanyDetail',
              params: {
                id: detail.id,
                name: item.name
              }
            }"
            :class="`item ${item.key}`"
          >
            {{ item.name }}
          </router-link>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, inject, watch } from "@vue/composition-api";
import { Toast } from "vant";
import ACL from "../components/ACL";
import { useCompanyData } from "../use/useCompanyData";
import { date, getRoomNo } from "../utils/format";

export default {
  name: "Detail",
  components: { ACL },
  filters: { date },

  setup(props, { root: { $route } }) {
    const { loading, data: detail } = useCompanyData($route.params.id);

    const { accessControl } = inject("app");

    const modules = computed(() => accessControl.modules);

    watch(
      loading,
      val => {
        if (val) {
          Toast.loading();
        } else {
          Toast.clear();
        }
      },
      {
        immediate: true
      }
    );

    return {
      loading,
      detail,
      modules,
      getRoomNo
    };
  }
};
</script>
